<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<c:set var="context"
	value="${pageContext.request.servletContext.contextPath}" />
<script type="text/javascript">


	$(document).ready(function() {
		createDialogConfirm();
		createDialogAlert();
		createDialogOk();
		var testId = $("#testId").text();
		
		var table = $('#listClasses').DataTable({
			"bInfo": false,
			"bServerSide" : false,
			"sAjaxSource" : testId + "/classJSON",
			"aoColumns" : [ {
				"mData":   null,
	            "mRender": function ( data, type, row ) {
	            	if(row.assigned == false){
	            		return '<div align="center"><input type="checkbox" class="select_checkbox"></div>';
	            	}
	            	return '<div align="center"><input type="checkbox" class="select_checkbox" checked></div>';
	            },
	            "width": "1%",
	            "bSortable": false
				}, {
				"mData" : "classId",
				"sTitle" : "Id",
				"width": "5%"
			}, {
				"mData" : "className",
				"width": "20%"
			} ]
		});
	});
	
	$(document).on("click","#update", function(){
		var testId = $("#testId").text();
		var listClass = ";";
		var checked = $("input:checkbox:checked");
		checked.each(function(index){
			var tr = $(this).parents("tr");
			var id = tr.find("td:nth-child(2)");
			listClass += id.text() + ";";
		});
		//Send ajax to Controller
		$.ajax({
				url: testId + '/update',
			   type: "POST",
			   dataType: 'text',
			   contentType: 'application/json',
			   mimeType: 'application/json',
			   data: listClass,
			   error:function(data,status,er) { 
			        alert("error: "+data+" status: "+status+" er:"+er);
			    },
			   success: function(data) {
			      alert(data);
			   }
		});
		return false;
	});

	$(document).on("click", "#delete", function() {
		try {
			$("#dialog-confirm").dialog("open");
		} catch (e) {
			alert(e);
		}
		return false;
	})

	function createDialogConfirm() {
		var testId = $("#testId").text();
		var testName = $("#testName").text();
		$("#dialog-confirm").dialog({
			autoOpen : false,
			resizable : false,
			modal : true,
			buttons : {
				"Delete" : function() {
					$.ajax({
						url : "../delete/" + testId,
						type : "GET",
						error : function() {
							$("#dialog-alert").dialog("open");
						},
						success : function(data) {
							$("#dialog-ok").dialog("open");
							//Return to list page
							window.location.href="../";
						}
					})
					$(this).dialog("close");
				},
				Cancel : function() {
					$(this).dialog("close");
				}
			}
		});
	};
	function createDialogAlert() {
		$("#dialog-alert").dialog({
			autoOpen : false,
			resizable : false,
			modal : true,
			buttons : {
				OK : function() {
					$(this).dialog("close");
				}
			}
		});
	};
	
	function createDialogOk() {
		$("#dialog-ok").dialog({
			autoOpen : false,
			resizable : false,
			modal : true,
			buttons : {
				OK : function() {
					$(this).dialog("close");
				}
			}
		});
	};
</script>
<div id="dialog-confirm" title="Delete Confirm">
	<p>
		<span class="ui-icon ui-icon-alert"
			style="float: left; margin: 0 7px 20px 0;"></span>Do you want to
		delete ${test.testAndQuizzName}?
	</p>
</div>

<div id="dialog-alert" title="Delete Alert">
	<p>
		<span class="ui-icon ui-icon-alert"
			style="float: left; margin: 0 7px 20px 0;"></span> Can't delete
		${test.testAndQuizzName}!
	</p>
</div>
<div id="dialog-ok" title="Delete Success">
	<p>
		<span class="ui-icon ui-icon-alert"
			style="float: left; margin: 0 7px 20px 0;"></span>
		${test.testAndQuizzName} deleted!
	</p>
</div>
<!-- Template for all sub-pages -->
<div id="portal_main_content" align="left">
	<!-- Don't change this -->
	<div id="site_title">

		<!-- ************** -->
		<!-- Able to change -->
		<h2>Tests & Quizzes: Information</h2>
	</div>
	<!-- Don't change this -->
	<div id="site_content">
		<div id="btn_control">

			<!-- ************** -->
			<!-- Able to change -->
			<a href="../" class="btn btn-primary btn-sm">Back</a> <a
				href="../edit/${test.testAndQuizzID}" class="btn btn-primary btn-sm">Edit</a>
			<a href="../detail/${test.testAndQuizzID}"
				class="btn btn-primary btn-sm">Detail</a> <a href="" id="delete"
				class="btn btn-primary btn-sm">Delete</a>
		</div>
		<div id="main_content">

			<!-- ************** -->
			<!-- Able to change -->
			<h6 class="hidden" id="testId">${test.testAndQuizzID}</h6>
			<h6 class="hidden" id="testName">${test.testAndQuizzName}</h6>
			<div>
				<fieldset class="input_table">
					<legend>${test.testAndQuizzName}</legend>
					<div class="input_row">
						<div>Name</div>
						<div>${test.testAndQuizzName}</div>
					</div>
					<div class="input_row">
						<div>Start Time</div>
						<div>
							<fmt:formatDate value="${test.startDay}"
								pattern="dd/MM/yyyy hh:mm:ss" />
						</div>
					</div>
					<div class="input_row">
						<div>End Time</div>
						<div>
							<fmt:formatDate value="${test.endDay}"
								pattern="dd/MM/yyyy hh:mm:ss" />
						</div>
					</div>
					<div class="input_row">
						<div>Test Time</div>
						<div>${test.testDuration} minutes</div>
					</div>
					<div class="input_row">
						<div>Submit Time</div>
						<div>${test.submitTimeAllow}</div>
					</div>
				</fieldset>
			</div>
		</div>
		<div id="table">

			<!-- ************** -->
			<!-- Able to change -->
			<h1>Classes</h1>
			<div id="btn_control">
			<a href="" id="update" class="btn btn-primary btn-sm">Update</a>
			</div>
			<table id="listClasses" class="hover table table-striped table-bordered"
				cellspacing="0" style="width: 100%;">
				<thead>
					<tr>
						<th></th>
						<th>Id</th>
						<th>Name</th>
					</tr>
				</thead>
			</table>
		</div>

	</div>
</div>

